<template>
    <!--index.wxml-->
    <view class="allPage">
        <view class="content">

            <view class="status">
                <text class="b"> {{json.orderStatusStr || ''  }}</text>
            </view>
              

            <view class="parts">
                <view class="line">
                   
                    <view class="l">
                        <text class="b">收货人</text>
                    </view>
                    <view class="r none">
                        <text>{{ json.placeOrderUser.mobile}}</text>

                        <text v-if="json.placeOrderUser.mobile" @click="$takePhone(json.placeOrderUser.mobile)" class="iconfont icon-dianhua col-green ml10 f36"></text>

                    </view>
                </view>
                <view class="line">
                    <view class="l">
                        <text class="b">预定时间</text>
                    </view>
                    <view class="r none">
                        <text class="col">{{appointDate}}</text>
                    </view>
                </view>
                <view class="sendAddress">
                  
                    <view class="">
                        <text class="">{{json.placeOrderUser.roomNumber}}</text>
                    </view>
                    <text>{{json.villageModel.name}} (<text class="col-hui">{{json.villageModel.address}}</text>)</text>
                
                </view> 
            </view>
              
            
            <DetailTemplate :json="json" showMarkt/>
           
        </view>

        <!-- 操作 送货 完成 -->
        <OrderHandle :json="json" @finish="initPage" />

    </view>
</template>
<script>
import { statusList ,DealOrderInfo } from '../../utils/configDIct.js'
import {parseTime} from '../../utils/tools'
import DetailTemplate from '../../components/DetailTemplate'

import OrderHandle from '../../components/Deliver/OrderHandle'

const app = getApp();
export default {
    components: {  DetailTemplate , OrderHandle  },
    data () {
        return {
            orderId:'',
            json:{
                placeOrderUser:{},
                orderGoodsModelList:[],
                dispatcherUser:{},
                villageModel:{},
                flashSupermarketModel:{}
            },
           
            statusList:statusList,
            appointDate:'',
            showCode:false,

        }
    },
    computed:{

    },
   
    onLoad( option ){
        // console.log('999999999999999',this.wechatInfo)
        this.orderId = option.id
        this.initPage()
    },
    mounted () {

    },
    methods: {
        initPage( cb ){

            this.$axios({url:'flash/supermarket/order/get?loading',data: this.orderId})
                .then( res =>{

                    this.json = DealOrderInfo( [res.data] ,this.statusList )[0]
                    // console.log('999999999999999',res)

                    this.appointDate = this.appointDateFunc( res.data )

                    cb && cb()

                }) 

        },
        //格式化预约时间
        appointDateFunc( json ){

            let appointDay = new Date( json.dispatcherEndTime ).getDate();
            let today = new Date().getDate();

            let str = '';

            // console.log('1231231212222', appointDay , today )

            if( appointDay == today ){
                str = '今日 '
            }
            else if( appointDay == (today + 1) ){
                str = '明天 '
            } 
            else if( appointDay == (today + 2) ){
                str = '后天 '
            }
            else{
                str = json.dispatcherEndTime.split(' ')[0]
            }

            str += parseTime(json.dispatcherStartTime , '{h}:{i}' )+ ' - '+ parseTime(json.dispatcherEndTime , '{h}:{i}' ) 

            return str 

        },
        //下拉刷新
        onPullDownRefresh () {

            this.initPage(()=>{
                uni.stopPullDownRefresh();//停止刷新
            })

        },
    }
}
</script>
<style lang="scss" scoped>
.content{
    padding: 30rpx 32rpx;
    .parts {
        padding: 30rpx 30rpx 30rpx;
    }
    .status{
        min-height: 52rpx;
        font-size: 40rpx;
        margin-bottom: 30rpx;
    }
    .head-tit{
        font-weight: bold;
        color: #000;
        font-size: 28rpx;
        margin-bottom: 20rpx;
    }
    .line {
        color: #565656;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10rpx 0;
        .l {
            text-align: left;
            margin-left: 10px;
            max-width: 500rpx;
            min-width: 160rpx;
        }
        .r {
            flex: 1;
            width: 100%;
            // border-bottom: 1rpx solid #f1f1f1;
            // padding-bottom: 20rpx;
            &.none {
                border: none;
            }
        }
        .b {
            // font-weight: bold;
        }
        .min {
            font-size: 24rpx;
        }
        ::v-deep .holderClass {
            color: #c1c1c1;
        }
        .icon {
            color: #c1c1c1;
            font-size: 24rpx;
            line-height: 38rpx;
        }
        .address {
            font-size: 22rpx;
            color: #565656;
        }
    }
    .sendAddress{
        font-size: 24rpx;
        color: #000;
        padding-top: 30rpx;
        margin-top: 30rpx;
        border-top: 1rpx solid #f6f6f6;
        line-height: 1.5;
    }
    .priceBox {
        padding: 0 32rpx 10rpx;
        font-size: 34rpx;
        .min {
            font-size: 24rpx;
        }
    }
}

</style>